<template>
  <div>
    <!-- 头部navbar -->
    <div>
      <van-nav-bar fixed>
        <template v-slot:left>
          <img class="logo" src="@/assets/pic1.jpg" alt="">
        </template>
        <!-- 最好将标签内的代码写个css样式，这样就可以实现自适应 -->
        <template #right>
          <van-icon name="search" size="0.48rem"  color="white" @click="toSearchPageFN"/>
        </template>
      </van-nav-bar>
    </div>

    <!-- tab栏 -->
    <div class="main">
      <!-- v-model关联的是激活项的下标 -->
      <!-- sticky开启粘性布局，offset-top设置位置 -->
      <!-- 高46px除以37.5=rem的值 -->
      <!-- animated切换动画 -->
      <!-- change属性是切换事件 -->
      <!-- @change="channelChange"  -->
      <van-tabs v-model="channel_id" animated sticky offset-top="1.222667rem" @change="channelChange">
        <!-- 渲染内容 -->
        <!-- 复习vue基础，:key的作用是给vue内部使用，主要使用diff算法对比key的值是否复用该节点或新建的节点(优化性能) -->
        <!-- 每个页面都有它自己的ArticleList -->
        <van-tab  v-for="item in userChannelsList"
        :key="item.id"
        :title="item.name"
        :name="item.id"

        >
          <ArticleList
            :channelId="channel_id"
          ></ArticleList>
        </van-tab>
      </van-tabs>
      <van-icon @click="plusClickFN" name="plus" size="0.37333334rem" class="moreChannels"/>
    </div>
    <!-- 频道弹出层 -->
    <!-- get-container挂载点设置在body身上才可以更改样式 -->
    <van-popup class="channel_pop" v-model="show" get-container="body" >
      <ChannelEdit
      @closeEV="show = false"
      :userChannelsList="userChannelsList"
      :unCheckChannelList="unCheckChannelList"
      @pushChannelObjEV="pushChannelObj"
      @removeChannelObjEV="removeChannelObj"
      @toChannelEV="toChannel"
      ></ChannelEdit>
    </van-popup>
  </div>
</template>

<script>
import { getUserChannelsAPI, getAllChannelsAPI, updateChannelAPI, removeChannelAPI } from '@/api/index.js'
import ArticleList from '@/views/Home/components/ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'

// 问题，每次切换tab拿到的数据都会刷新
// 第一次创建ArticleList组件，第二次就是显示/隐藏
// 解决外面使用的是同一个数组切换数据（多个ArticleLIst使用的是同一个数组）
// 数组放到articleList的内部，自己请求对应自己的数据
export default {
  name: 'Home',
  data() {
    return {
      channel_id: 0, // 控制激活项 默认是0
      userChannelsList: [], // 用户选择频道列表
      allChannelsList: [], // 所有频道列表
      // articleList: [] // 文章列表
      show: false, // 频道弹出层的显示和隐藏
      channelScrollTObj: {} // 保存每个频道的滚动位置
    }
  },
  methods: {
    // 获取用户频道
    // getUserChannelsAPI 接口偶尔有问题
    async getUserChannels() {
      const { data: res } = await getUserChannelsAPI()
      this.userChannelsList = res.data.channels
      // console.log(res.data)
    },

    async getAllChannels() {
      const { data: res } = await getAllChannelsAPI()
      this.allChannelsList = res.data.channels
      // console.log(res.data)
    },

    // 点击加号触发隐藏面板事件
    plusClickFN() {
      this.show = true
    },

    // 子传父，用户新增频道
    async pushChannelObj(channelObj) {
      this.userChannelsList.push(channelObj)
      // 更新数据
      const { data: res } = await updateChannelAPI({
        channels: this.userChannelsList
      })
      console.log(res)
    },

    // 子传父，用户删除频道
    async removeChannelObj(userChannelObj) {
      // 数组下标
      const index = this.userChannelsList.findIndex(obj => obj.id === userChannelObj.id)
      // 以找到频道的下标删除这个条记录
      this.userChannelsList.splice(index, 1)
      const res = await removeChannelAPI(userChannelObj.id)
      console.log(res)
    },

    // 根据channel_id跳转页面
    toChannel(channelObj) {
      this.channel_id = channelObj.id // v-model控制
    },

    // 跳转到搜索页面
    toSearchPageFN() {
      this.$router.push('/search')
    },
    scrollFN() {
      this.$route.meta.scrollT = document.documentElement.scrollTop // 先获取缓存前的位置
      // 同时保存当前频道的滚动距离 {}中的[]是动态key
      this.channelScrollTObj[this.channel_id] = document.documentElement.scrollTop
      // console.log(this.channelScrollTObj)
    },

    // // 获取文章列表
    // async getAllArticleList() {
    //   const { data: res } = await getAllArticleListAPI({
    //     channel_id: this.channel_id,
    //     timestamp: (new Date()).getTime()
    //   })
    //   this.articleList = res.data.results
    //   // console.log(res.data.results)
    // },
    // tabs切换事件
    channelChange() {
      // this.getAllArticleList()
      // 设置滚动条位置
      // 注意！在tab切换频道的时候，这个vant组件会吧切走的容器height设置为0，所以切换tab都会重置
      // 所以切换来会失效,滚动事件也被height为0触发了
      // 因为切换的时候tab组件会清空height，所以在等到dom执行后在实现赋值的操作，使用$nextTick()
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.channelScrollTObj[this.channel_id]
      })
    }
  },
  created() {
    // 调用用户频道API
    this.getUserChannels()
    this.getAllChannels()
    // 调用获取文章API
    // this.getAllArticleList()
  },
  // activated  组件被缓存后重新激活触发activated事件
  activated() {
    window.addEventListener('scroll', this.scrollFN) // 使用函数体
    document.documentElement.scrollTop = this.$route.meta.scrollT
  },
  // 组件使用缓存失去焦点的时候触发的生命周期事件
  deactivated() {
    window.removeEventListener('scroll', this.scrollFN)
  },
  components: {
    ArticleList,
    ChannelEdit
  },
  computed: {
    unCheckChannelList() {
      // 把有数组挨个取出，去用户已选频道数组里查找，如果找不到，则让filter方法收集到一个新数组里
      const newArr = this.allChannelsList.filter(bigobj => {
        const index = this.userChannelsList.findIndex(smallobj => {
          return smallobj.id === bigobj.id
        })
        // 如果找到了
        if (index > -1) {
          return false
        } else {
          return true
        }
      })
      return newArr
    }
  }
}
</script>

<style lang="less" scoped>
.logo{
  width: 150px;
  height: 46px;
}
.main{
  padding-top: 46px;

}
/deep/ .van-tabs__wrap {
     padding-right: 30px;
     background-color: #ffff;
   }

   // 设置小图标的样式
   .moreChannels {
     position: fixed;
     top: 62px;
     right: 8px;
     z-index: 999;
   }
  .channel_pop{
    width: 100%;
    height: 100%;
  }
</style>
